<template>
  <!-- 查看通知详情弹窗 -->
  <el-dialog
    v-model="dialogVisible"
    class="notice_dialog"
    align-center
    style="width: 925px; padding: 0; height: auto"
    draggable
    :append-to-body="true"
    show
    :before-close="close"
  >
    <template #header>
      <div class="custom_header">
        <span>消息</span>
      </div>
    </template>
    <!-- 通知内容 -->
    <div class="locked_content">
      <span class="title-text">{{ title }}</span>
      <div class="detail-box">
        <!-- <span>报名时间：{{ sign }}</span>
        <span>活动时间：{{ activity }}</span> -->
        <span class="description">{{ content }}</span>
        <span class="time-text">发布时间：{{ publish }}</span>
      </div>
    </div>

    <div class="btn-box">
      <el-button type="primary" @click="handleDelete">删除信息</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
export default {
  name: "viewNotice",
};
</script>
<script lang="ts" setup>
import { ref } from "vue";
const dialogVisible = ref(false);
const title = ref("这是通知标题");
// const sign = ref("这是报名时间");
// const activity = ref("这是活动时间");
const content = ref("这是通知详情这是通知详情这是通知详情");
const publish = ref("这是发布时间");

//接收参数
const show = (obj: { title: string; content: string; publish: string }) => {
  dialogVisible.value = true;
  title.value = obj.title;
  content.value = obj.content;
  publish.value = obj.publish;
};
const close = () => {
  dialogVisible.value = false;
};
defineExpose({
  show,
  close,
});

const handleDelete = () => {
  console.log("删除通知");
};

// 定义接收父组件数据的对象
const currentData = ref({
  title: "",
  publishTime: "",
  sign: "",
  activity: "",
  content: "",
});
</script>

<style lang="scss" scoped>
.custom_header {
  padding: 24px 32px 10px 32px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.9);
}
.locked_content {
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #e7e7e7;
  .title-text {
    display: flex;
    justify-content: center;
    font-size: 16px;
    color: #1d2129;
    margin-bottom: 24px;
  }
  .detail-box {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: #3d3d3d;
    .description {
      margin: 24px 0;
    }
  }
  .time-text {
    margin: 35px 0;
    display: flex;
    justify-content: flex-end;
  }
}
.btn-box {
  border-top: 1px solid #e7e7e7;
  display: flex;
  justify-content: flex-end;
  padding: 24px 32px;
}
</style>
